<html>
  <head>
  </head>
  <body>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/ajaxfileupload.js"></script>
    <script>
      function ajaxFileUpload()
      {
      //starting setting some animation when the ajax starts and completes
      $("#loading")
      .ajaxStart(function(){
      $(this).show();
      })
      .ajaxComplete(function(){
      $(this).hide();
      });
      
      /*
      prepareing ajax file upload
      url: the url of script file handling the uploaded files
      fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
      dataType: it support json, xml
      secureuri:use secure protocol
      success: call back function when the ajax complete
      error: callback function when the ajax failed
      
      */
      $.ajaxFileUpload
      (
      {
      url:'/store/', 
      secureuri:false,
      fileElementId:'filetoupload',
      dataType: 'json',
      success: function (data, status)
      {
          if(typeof(data.error) != 'undefined')
          {
              var obj = document.getElementById('uploadmsgblock');
              var obj1 = document.getElementById('uploadmsg');
              obj.style.display='block';
              if(data.error != '')
              {
                  obj1.innerHTML = "update failed: " + data.error ;
                  obj.style.background='#FF0000';
              }else{
                  obj1.innerHTML = "update succeed.<a href=\"/look/" + data.msg + "\">view</a>";
                  obj.style.background='#00FFFF';
              }
          }
      },
      error: function (data, status, e)
      {
          var obj = document.getElementById('uploadmsgblock');
          var obj1 = document.getElementById('uploadmsg');
          obj.style.display='block';
          obj.style.background='#FF0000';
          obj1.innerHTML = "update failed: " + e ;
      }
      }
      )
      
      return false;

      }  
    </script>

    <script type="text/javascript">
      var _isIE = navigator.userAgent.toLowerCase().indexOf('msie') >= 0;
    </script>
    <style type="text/css">
      a {
      border:0px;
      }
      img {
      border:0px;
      }
    </style>
    <div class="container" width="100%">
      <div height="40px">
	<div style="float:left;padding:0px;"><nobr>
	    <span><a href="http://www.sevenever.com/"><img src="/img/logo32.gif" alt="logo"></a></span>
	</nobr></div>
	<div style="text-align:right;height:36px;">
	  <b>{{user.nickname}}</b>
	  {% if user %}
	  | <a href="/list/">list</a>
	  | <a href="/logout">sign out</a>
	  {% else %}
	  welcome! 
	  | <a href="{{login_url}}">sign in with a google account</a>
	  {% endif %}										  	</div>
      </div>
      <div>
	<table align="center">
	  <tr>
	    <td>borrow a file from:</td>
	    <td>
	      <input id="urltoborrow" size="50" type="text" value="Input image url here." onclick="if(this.value=='Input image url here.') this.value='';" onblur="if(this.value=='') this.value='Input image url here.';">
	    </td><td>
	      <input type="button" value="borrow!" onclick="document.getElementById('newurl').value ='{{host_url}}/borrow/' + document.getElementById('urltoborrow').value;"><br/>
	    </td>
	  </tr>
	  <tr>
	    <td>url to paste:</td>
	    <td>
	      <input id="newurl" size="50" type="text" value="copy new url from here." readonly onmouseover="this.select(-1);" onclick="this.select(-1);">
	    </td><td>
	      <input type="button" value="test view" onclick="window.location='{{host_url}}/borrow/' + document.getElementById('urltoborrow').value;">
	      <script type="text/javascript">
		var copyButton = '<input type="button" value="copy URL" onclick="document.getElementById(\'newurl\').select(-1);document.execCommand(\'Copy\');">';
		if(_isIE) document.write(copyButton);
	      </script>
	    </td>
	  </tr>
	  {% if user %}
	  <tr><td>steal a file from:</td>
	    <td>    <input id="urltosteal" size="50" type="text" value="Input image url here." onclick="if(this.value=='Input image url here.') this.value='';" onblur="if(this.value=='') this.value='Input image url here.';">
	    </td><td>
	      <input type="button" value="steal!" onclick="window.location='{{host_url}}/steal/' + document.getElementById('urltosteal').value;">
	  </td></tr>
	  <tr><td>upload a file from:</td>
	    <form action="/store/" method="post"><td>
		<input name="filetoupload" id="filetoupload" size="42" type="file" onclick="if(this.value=='Input image url here.') this.value='';" onblur="if(this.value=='') this.value='Input image url here.';">
	      </td><td>
		<input type="button" value="store!" onclick="return ajaxFileUpload();">
		<img id="loading" src="/img/loading.gif" style="display:none;width:20px;height:20px;"><br/>
	  </td></form></tr>
	  <tr><td></td><td>
	      <div id="uploadmsgblock" style="display:none;width:100%;background-color:#00FFFF;">
		<span align="right" style="float:right;">
		  <a href="#" onclick="document.getElementById('uploadmsgblock').style.display='none';return false;">
		    <img src="/img/x.gif" alt="" height="100%">
		  </a>
		</span>
		<span id="uploadmsg">The message area.</span>
	      </div>
	  </td></tr>
	  {% endif %}
	</table>
      </div>
      <br/>
      <br/>
      <div>
	<div>
	  <table align="center" width="500px"><tr><td>
		Tips: input image url in the first box and click "borrow!" button, the url to paste is in the second box, copy and paste it to bbs or your blog.
		<script type="text/javascript">
		  if(_isIE) document.write('or copy url using button "copy URL" directly.');
		</script>
	  </td></tr></table>
	</div>
      </div>
      <div>
	<table width="100%" align="center"><tr><td align="center">
	      <a href="http://code.google.com/appengine/">
		<img src="http://code.google.com/appengine/images/appengine_lowres.jpg"></a>Powered by GAE
	</td></tr></table>
      </div>  
    </div>
  </body>
</html>
